<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  BG Effects:  Color Wheel</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="JavaScript Source Code 3000">
<META NAME="section" CONTENT="BG Effects">
<META NAME="description" CONTENT="This JavaScript will change the background  from one color to the next for each of the 10 colors then it starts the loop over again!  There is also an On/Off button to let you start and stop the JavaScript.">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var pos = 10;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
   }
}
var col=new initArray("4b","5b","8b","8b");
function stop() {
document.bgColor = '#FFFFFF';
clearTimeout(loopID);
}
function start() {
col[1]="red"
col[2]="yellowgreen"
col[3]="yellow"
col[4]="whitesmoke"
col[5]="white"
col[6]="wheat"
col[7]="violet"
col[8]="turquoise"
col[9]="tomato"
col[10]="thistle"
pos++;
if (pos<0||pos>10) {
pos = 0;
}
document.bgColor = col[pos];
loopID = setTimeout("start()",50);
}
// End -->
</SCRIPT>
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff onLoad="start()">

<BR>
<center>
<table width="600" cellpadding="0" cellspacing="10">
<tr>
<td width="468" align="center">

	
</td>
<td width="120" align="center">

	
</td>
</tr>
</table>
<BR>
<BR>
<BASEFONT SIZE=3>
  <FONT SIZE=6>
<B><FONT SIZE="+2" FACE="Helvetica,Arial" ALIGN=RIGHT COLOR="#0000FF">
<b><A HREF="../index.htm" /" TARGET="_top">
Home</A> </b><img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <b><A HREF="index.htm" /bgeffects/"><font color="#FF0000">Background Effects</font></A> </b>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <FONT COLOR="#006666">Color Wheel</FONT></b></FONT><BR>
</B><BR>
  </FONT>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->

This JavaScript will change the background  from one color to the next for each of the 10 colors then it starts the loop over again!  There is also an On/Off button to let you start and stop the JavaScript.
<br>
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<center>
<FORM>
<input type="button" value="On" onClick="start()">
<input type="button" value="Off" onClick="stop()">
</FORM>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  BG Effects:  Color Wheel</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  1.55 KB  " size="24">
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- THREE STEPS TO INSTALL COLOR WHEEL:

   1.  Put the specified code into the HEAD of your HTML document
   2.  Add the onLoad event handler to the BODY tag 
   3.  Copy the last coding into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Copy this code into the BODY of your HTML document  --&gt;
		  
&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;

&lt;!-- Original: Eric Stremming <estremming@hotmail.com>  --&gt;
&lt;!-- Web Site: http://www.geocities.com/SunsetStrip/Club/5970  --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
var pos = 10;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i &lt; this.length; i++) {
this[i] = initArray.arguments[i];
   }
}
var col=new initArray("4b","5b","8b","8b");
function stop() {
document.bgColor = '#FFFFFF';
clearTimeout(loopID);
}
function start() {
col[1]="red"
col[2]="yellowgreen"
col[3]="yellow"
col[4]="whitesmoke"
col[5]="white"
col[6]="wheat"
col[7]="violet"
col[8]="turquoise"
col[9]="tomato"
col[10]="thistle"
pos++;
if (pos&lt;0||pos&gt;10) {
pos = 0;
}
document.bgColor = col[pos];
loopID = setTimeout("start()",50);
}
// End --&gt;
&lt;/SCRIPT&gt;

&lt;!-- STEP TWO: Add the onLoad event handler to the BODY tag  --&gt;

&lt;BODY onLoad="start()"&gt;

&lt;!-- STEP THREE: Copy this last code into the BODY of your HTML document  --&gt;

&lt;CENTER&gt;
&lt;FORM&gt;
&lt;input type="button" value="On" onClick="start()"&gt;
&lt;input type="button" value="Off" onClick="stop()"&gt;
&lt;/FORM&gt;
&lt;/CENTER&gt;

 

&lt;!-- Script Size:  1.55 KB  --&gt;
</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>